
window.onload = async function () {
    try {
        const res = await axios({
            url: '/dashboard',
        })
        console.log('res', res);
        const {year,salaryData,groupData,provinceData} = res.data
        for (const key in res.data.overview) {
            document.querySelector(`[name=${key}]`).innerHTML = res.data.overview[key]
      }
      function chart(year) {
        var myChart = echarts.init(document.querySelector('#line'));
        const option = {
          // 标题部分的设置
          title: {
            text: '2021全学科薪资走势',           
                top: '2%',
                left: '2%',           
          },
          // 图表
          grid: {
            // 设置上下左右的间隙
            top: '13%',
            left: '10%',
            right: '10%',
            bottom: '10%'
          },
          // x轴的设置
          xAxis: {
            type: 'category',
    
            data: year.map(v=>v.month),
            // x轴线段设置
            axisLine: {
              // 线段的样式
              lineStyle: {
                // 类型 虚线
                type: 'dashed',
                // 颜色
                color: '#d3d3d3'
              }
            },
            // x轴文本设置
            axisLabel: {
              // 颜色
              color: 'black'
            }
          },
          // y轴的设置
          yAxis: {
            type: 'value',
            // 分割线
            splitLine: {
              // 线的样式
              lineStyle: {
                type: 'dashed', // 类型
                // width:20, // 宽度
                color: 'deepskyblue' // 颜色
              }
            }
          },
          color: ['#5f8eff'],
          // 提示框 设置了才会出现
          tooltip: {
            show: true
          },
          series: [{
            data: year.map(v=>(v.salary)),
            type: 'line',
            // 圆圈
            smooth: true,
            // 圆圈大小
            symbolSize: 10,
            // 线宽
            lineStyle: {
              width: 8
            },
            // 区域颜色
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#aed4ff' // 0% 处的颜色
                  },
                  {
                    offset: .7,
                    color: '#ffffff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }]
        };
        myChart.setOption(option);

    }
    chart(res.data.year)

// -----------------------------------
    function charts(salaryData) {
        var myChart = echarts.init(document.querySelector('#salary'));
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                bottom:'10%',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:salaryData.map(v=> {
                    return {
                        value:v.g_count+v.b_count,
                        name:v.label
                    }
                }),
            }]
        };
        myChart.setOption(option);
    }
    charts(salaryData)
//------------------------------------------
function chartT(groupData) {
    var myChart = echarts.init(document.querySelector('#lines'));
    option = {
        // x轴设置
        xAxis: {
            type: 'category',
            data: groupData[1].map(v => v.name),
            // 线段设置
            axisLine: {
                // 线的样式
                lineStyle: {
                    type: 'dashed',
                    color: '#d4d4d6'
                }
            }
        },
        yAxis: {
            type: 'value',
            // 分割线设置
            splitLine: {
                // 线的样式
                lineStyle: {
                    type: 'dashed',
                    color: '#d4d4d6'
                }
            }
        },
        // 颜色
        color: [
            // 渐变
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                        offset: 0,
                        color: '#34d29a' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#d4f5ea' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                        offset: 0,
                        color: '#499fed' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#d8eafb' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }
        ],
        series: [
            // 柱状图 给多个图形,会有柱形
            {
                data: groupData[1].map(v => v.hope_salary),
                type: 'bar'
            },
            {
                data: groupData[1].map(v => v.salary),
                type: 'bar'
            },
        ]
        
    };
    myChart.setOption(option);
    
    const btns = document.querySelectorAll('#btns button')
    btns.forEach(v => {
        v.onclick = function () {
            btns.forEach(item => item.classList.remove('btn-blue'))
            this.classList.add('btn-blue')
            const index = this.innerHTML
            option.xAxis.data = groupData[index].map(v => v.name)
            option.series[0].data = groupData[index].map(v=>v.hope_salary)
            option.series[1].data = groupData[index].map(v=>v.salary)
            myChart.setOption(option);
    
    
        }
    });
}
chartT(groupData)
// ------------------------------

// ----------------------------


function charts(salaryData) {
    var myChart = echarts.init(document.querySelector('#salary'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [{
            name: 'Access From',
            type: 'pie',
            bottom:'10%',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data:salaryData.map(v=> {
                return {
                    value:v.g_count+v.b_count,
                    name:v.label
                }
            }),
        }]
    };
    myChart.setOption(option);
}
charts(salaryData)
// ---------------------

function chartA() {
    var myChart = echarts.init(document.querySelector('#gender'));
    const option = {
        // title可以设置一个数组 给多个标题
        title: [
          {
            text:"男女薪资分布"
          },
          {
            text: '男生',
            left: 'center',
            top:"45%"
          },
          {
            text: '女生',
            left: 'center',
            top:'85%'
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          show: false
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['15%', '20%'],
            // 圆心的位置
            center: ['50%', '30%'],
           
                data:salaryData.map(v=> {
                    return {
                        value:v.b_count,
                        name:v.label
                    }
                }),
            
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['15%', '20%'],
            center: ['50%', '70%'],
             data:salaryData.map(v=> {
                        return {
                            value:v.g_count,
                            name:v.label
                        }
                    }),
            
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    myChart.setOption(option);
}
chartA()
// ------------------------------------------------
const chartB = (provinceData) => {
    console.log(provinceData);
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    provinceData.forEach(v=> {
        dataList.find(item => {
            if(v.name.indexOf(item.name) === 0) {
                item.value = v.value
            }
        })
    })
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
  chartB(provinceData)
} catch (error) {
    console.dir(error);
}
}